<template>
  <div class="typing">
    <div v-html="displayText + `${ showCursor || adding ? `<span class='cursors'>|</span>`:'' }`"></div>
  </div>
</template>

<script setup>
import { ref, watch, onUnmounted } from 'vue';

const props = defineProps({
  // 要显示的完整文本
  text: {
    type: String,
    required: true
  },
  // 打字速度（毫秒/字符）
  speed: {
    type: Number,
    default: 50
  },
  showCursor: {
    type: Boolean,
    default: false
  },
});
const emits = defineEmits(['update', 'ok'])

const displayText = ref('');
const adding = ref(false);
let timer = null;

// 更新显示的文本
const updateDisplayText = () => {
  if (displayText.value.length < props.text.length) {
    adding.value = true;
    displayText.value = props.text.substring(0, displayText.value.length + 1);
    emits('update')
    timer = setTimeout(updateDisplayText, props.speed);
  } else {
    adding.value = false;
    setTimeout(() =>{
      emits('ok')
    } ,600)
  }
};

// 增量更新
watch(() => props.text, (newText) => {
  // 如果新文本比当前显示的文本长，则继续打字
  if (newText.length > displayText.value.length) {
    clearTimeout(timer);
    updateDisplayText();
  }
});

// 初始化
updateDisplayText();

// 组件卸载时清理定时器
onUnmounted(() => {
  clearTimeout(timer);
});
</script>

<style>
.typing {
  max-width: 384px;
  background: transparent;
  border-radius: 4px 19px 19px 19px;
  padding: 12px;
  line-height: 22px;
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
  word-break: break-all;
}
.typing h1 {
  font-size: 22px;
  font-weight: 600;
  line-height: 48px;
}
.typing h2 {
  font-size: 18px;
  font-weight: 600;
  line-height: 36px;
}
.typing h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 36px;
}
.cursors {
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
</style>  